@con-width: 1200px;
@text-size: 12px;
@font-size: 14px;
@mp-size: 15px;
@pm-size: 30px;
@mmp-size: 10px;
@ppm-size: 40px;
@border-size: 5px;
@text-color: #999;
@hover-color: #81ACF2;
@back-color: #fff;
* {
	padding: 0;
	margin: 0;
}

ul {
	list-style: none;
}

#pc {
	background: #f6f6f6;

	.container {
		width: @con-width;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
	}
}

header {
	width: 100%;
	height: @ppm-size;
	background-color: #F6F6F6;
	line-height: @ppm-size;

	.hd-con {
		a {
			font-size: @text-size;
			color: @text-color;
			text-decoration: none;

			&:hover {
				color: @hover-color;
			}
		}

		span {
			font-size: @text-size;
			color: @text-color;
		}

		p {
			display: inline;
			font-size: @text-size;
			color: @text-color;
		}

		.left {
			width: 200px;
			display: flex;
			align-items: center;

			a {
				&:nth-child(2) {
					margin-right: @mp-size;
				}

			}

			img {
				width: @mp-size;
				margin-right: @border-size;
			}
		}
		.right{
			p{
				span{
					color: @hover-color;
				}
			}
		}
	}
}

nav {
	width: 100%;
	height: 80px;
	border-bottom: 2px solid @hover-color;
	background-color: @back-color;

	.nav-con {
		padding: 20px 0;

		img {
			width: 180px;
		}

		.search-input {
			display: flex;

			.search {
				width: 300px;
				height: @ppm-size;
				border: 1px solid #DCDFE6;
				border-right: none;
				border-top-left-radius: @border-size;
				border-bottom-left-radius: @border-size;
				display: flex;
				align-items: center;
			}

			i {
				color: @text-color;
				font-style: normal;
			}

			span {
				font-size: 13px;
				color: @text-color;
				line-height: @ppm-size;
			}

			input {
				height: @ppm-size;
				border: none;
				font-size: @font-size;
				padding-left: @border-size;
				outline: none;
				&::placeholder{
					color:#C0C4CC;
				}
			}

			button {
				width: 70px;
				height: 42px;
				border: 1px solid #DCDFE6;
				border-top-right-radius: @border-size;
				border-bottom-right-radius: @border-size;
				background-color: @hover-color;
				outline: 0;
				border: 0;
				transition: 0.1s;
				span {
					color: @back-color;
				}
				&:hover {
					background: #66b1ff;
					border-color: #66b1ff;
					color: #fff;
				}
			}

			.cart {
				width: 100px;
				height: 40px;
				margin-left: @mp-size;
				border: 1px solid #e8e8e8;
				padding-left:@mp-size;
				display: flex;
				align-items: center;
				img {
					width: 17px;
					margin-right: @border-size;
				}

				span {
					color: @hover-color;
					font-size: @text-size;
				}
			}
		}
	}

}
section{
	position: fixed;
	display: none;
	width: 300px;
	height: 40px;
	background-color: #EDF2FC;
	border-radius: 5px;
	left: 50%;
	top: 200px;
	margin-left: -160px;
	i{
		color: #909399;
		line-height: 40px;
		margin-left: @pm-size;
	}
	span{
		position: absolute;
		font-size: 14px;
		color: #909399;
		line-height: 40px;
		margin-left: @mmp-size;
	}
}
main {
	width: 100%;

	.main-con1 {
		margin: 20px auto 0 auto !important;

		.message {
			width: 334px;
			height: 384px;
			background-color: @back-color;

			.flex {
				display: flex;
				align-items: center;
				padding: 25px 20px 0 20px;

				a {
					font-size: 13px;
					color: @hover-color;
					text-decoration: none;

					&:nth-child(2) {
						margin-left: @mp-size;
					}

					&:nth-child(3) {
						margin-left: @mmp-size;
					}
				}
			}

			.me-nav {
				margin-top: 67px;

				ul {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
				}

				li {
					width: 110px;
					height: 113px;
					text-align: center;
					border-top: 1px solid #eee;
					display: flex;
					align-items: center;
					justify-content: center;

					&:nth-child(1),
					&:nth-child(2),
					&:nth-child(4),
					&:nth-child(5) {
						border-right: 1px solid #eee;
					}

					img {
						display: block;
						margin: 0 auto;
					}

					a {
						font-size: @font-size;
						color: #000;
						text-decoration: none;

						&:hover {
							color: @hover-color;
						}
					}
				}
			}
		}
	}

	.main-con2 {
		margin-top: @ppm-size  !important;

		ul {
			margin-bottom: @ppm-size;
			display: flex;

			li {
				background: @back-color;

				&:hover {
					box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .1);
				}

				&:nth-child(1),
				&:nth-child(2) {
					margin-right: @pm-size;
				}

				a {
					text-decoration: none;
					color: @hover-color;

					.con2 {
						padding: 20px 20px @pm-size 20px;

						.courses {
							display: flex;
							align-items: center;
							margin-bottom: @mp-size;

							img {
								margin-left: @mmp-size;
							}

							.con2-ft {
								font-size: 22px;
							}
						}

						.p-ft {
							font-size: @font-size;
							line-height: 25px;
							color: #666;
						}
					}
				}
			}
		}
	}

	.con-title {
		margin-top: @pm-size  !important;

		.course_study {
			display: flex;
			border-left: 3px solid @hover-color;
			padding-left: @mmp-size;

			.h3-ft {
				margin-right: @mp-size;
				color: @hover-color;
				font-size: 22px;
			}

			.sp-ft {
				line-height: @pm-size;
				color: #666;
				font-size: 20px;
			}
		}

		a {
			text-decoration: none;
			color: @text-color;
			font-size: 18px;
			&:hover{
				color:@hover-color;
			}
		}
	}

	.main-con3 {
		margin-top: @pm-size  !important;

		a {
			img {
				width: 384px;
				height: 300px;
				object-fit: cover;
			}
		}

		.con2 {
			padding: 20px @ppm-size @pm-size @ppm-size  !important;
		}

		.con2-ft {
			text-align: center;
		}
	}

	.news {
		margin-top: @pm-size  !important;

		.newsLists {
			height: 300px;
			padding-left: @ppm-size;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.news-box {
				a {
					color: #333;
					text-decoration: none;
					display: flex;
					align-items: center;

					&:hover {
						color: @hover-color;
						box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .1);
					}

					img {
						width: 248px;
						height: 140px;
					}
				}

				.newsText {
					padding: @mp-size 0 @mp-size @mp-size;

					.h3-ft {
						line-height: 27px;
						font-size: 18px !important;
						margin-bottom: @mmp-size;
					}

					.box-ft {
						font-size: @font-size;
						line-height: 22px;
						position: relative;

						.newsTime {
							position: absolute;
							bottom: 0;
							right: @border-size;
						}
					}
				}
			}
		}
	}
}

footer {
	padding: @pm-size 0;
	margin-top: 50px;
	background: @back-color;

	.contact {
		color: #666;
		font-size: @font-size;

		.box-ft {
			margin: @mp-size 0;
			font-size: @pm-size;
		}

		.p-ft {
			margin-bottom: @mmp-size  !important;
		}
	}

	.footer-box {
		width: 230px;
		display: flex;
		justify-content: space-between;
		line-height: @pm-size;

		a {
			text-decoration: none;
			font-size: @font-size;
			color: #333;

			&:hover {
				color: @hover-color;
			}
		}
	}

	.code {
		color: #333;
		font-size: @font-size;
		display: flex;

		.code-box {
			img {
				width: 110px;
				height: 110px;
			}

			.p-ft {
				margin-top: @mmp-size;
				color: @text-color;
				font-size: @text-size;
				text-align: center;
			}

			&:nth-child(2),
			&:nth-child(3) {
				margin-left: 50px;
			}
		}
	}

	.footer-serial {
		margin-top: @mmp-size;
		color: @text-color;
		font-size: @text-size;
		text-align: center;
	}
}